<template>
  <div class="bcf pos-r">
    <div class="">
      <div style="width: 70vw;margin: 0 auto;" class="padt10">
        <mu-tabs inverse :value.sync="editTab">
          <mu-tab value="main">基本信息</mu-tab>
<!--          <mu-tab value="model" v-if="model.id > 0">模块权限</mu-tab>-->
          <mu-tab value="top" v-if="model.id > 0">顶栏权限</mu-tab>
          <mu-tab value="menu" v-if="model.id > 0">菜单权限</mu-tab>
          <mu-tab value="apiAllow" v-if="model.id > 0">接口授权</mu-tab>
          <mu-tab value="apiDeny" v-if="model.id > 0">接口屏蔽</mu-tab>
          <mu-tab value="pageAllow" v-if="model.id > 0">功能授权</mu-tab>
          <mu-tab value="pageDeny" v-if="model.id > 0">功能屏蔽</mu-tab>
        </mu-tabs>
        <div class="bcf bdso pad10" v-show="editTab === 'main'" style="width: 70vw;min-height: 60vh">
          <title-a>基本信息</title-a>
          <EzData ref="editForm" :config="configEdit.main()" v-model="model" :key="editKey"></EzData>
          <div>
            <title-a>选择模块权限</title-a>
            <EzData ref="editForm" :config="configEdit.model()" v-model="model" :key="editKey*2"></EzData>
          </div>
        </div>
<!--        <div class="bcf bdso pad10" v-if="editTab === 'model'" style="width: 70vw;height: 60vh;overflow: scroll">-->
<!--          <EzData ref="editForm" :config="configEdit.model()" v-model="model" :key="editKey"></EzData>-->
<!--          <EzTreeSelect :config="configEdit.model()" v-model="model.modelIds" :key="editKey"></EzTreeSelect>-->
<!--        </div>-->
        <div class="bcf bdso pad10" v-if="editTab === 'top'" style="width: 70vw;height: 60vh;overflow: scroll">
          <EzTreeSelect :config="configEdit.top()" v-model="model.topIds" :key="editKey"></EzTreeSelect>
        </div>
        <div class="bcf bdso pad10" v-if="editTab === 'menu'" style="width: 70vw;height: 60vh;overflow: scroll">
          <EzTreeSelect :config="configEdit.menu()" v-model="model.menuIds" :key="editKey"></EzTreeSelect>
        </div>
        <div class="bcf bdso pad10" v-if="editTab === 'apiAllow'" style="width: 70vw;height: 60vh;overflow: scroll">
<!--          <EzTreeSelect :config="configEdit.api()" v-model="model.apiAllowIds" :key="editKey"></EzTreeSelect>-->
          <ApiSelector v-model="model.apiAllowKeys" :height="360" :key="editKey"></ApiSelector>
        </div>
        <div class="bcf bdso pad10" v-if="editTab === 'apiDeny'" style="width: 70vw;height: 60vh;overflow: scroll">
<!--          <EzTreeSelect :config="configEdit.api()" v-model="model.apiDenyIds" :key="editKey"></EzTreeSelect>-->
          <ApiSelector v-model="model.apiDenyKeys" :height="360" :key="editKey"></ApiSelector>
        </div>
        <div class="bcf bdso pad10" v-if="editTab === 'pageAllow'" style="width: 70vw;height: 60vh;overflow: scroll">
          <PageSelector v-model="model.pageAllowKeys" :height="360" :key="editKey"></PageSelector>
        </div>
        <div class="bcf bdso pad10" v-if="editTab === 'pageDeny'" style="width: 70vw;height: 60vh;overflow: scroll">
          <PageSelector v-model="model.pageDenyKeys" :height="360" :key="editKey"></PageSelector>
        </div>
      </div>
    </div>
    <div class="w100 tac padt10">
      <mu-button class="mar1" color="primary" @click="save">
        <mu-icon left value="save"></mu-icon>
        保存
      </mu-button>
      <mu-button class="mar1" color="warning" @click="cancelEdit">
        <mu-icon left value="close"></mu-icon>
        取消
      </mu-button>
    </div>
    <div class="pos-a t0 l0 pad10" v-if="!isComp">
      <mu-button color="primary" icon @click="goback(-1)">
        <mu-icon value="arrow_back"></mu-icon>
      </mu-button>
    </div>
  </div>
</template>

<script>
import mixin_edit from "./js/mixin_edit";
import EzData from "@/comps/EzData";
import EzTreeSelect from "@/comps/form/EzTreeSelect.vue";
import EzCheckBox from "@/comps/form/EzCheckBox.vue";
import PageSelector from "@/pages/v1/core/Role/js/PageSelector.vue";
import ApiSelector from "@/pages/v1/core/Role/js/ApiSelector.vue";
import TitleA from "@/comps/comm/TitleA.vue";

export default {
  name: "v1-core-Role-edit",
  components: {TitleA, ApiSelector, PageSelector, EzCheckBox, EzTreeSelect, EzData},
  mixins: [mixin_edit],
}
</script>

<style scoped>

</style>